<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div id="vuebox">
        <table align="center" border="1">
            <tr>
                <td colspan="7">人员列表<a href="javascript:void(0)" @click="openAdd()">添加</a></td>
            </tr>
            <tr>
                <td width="60px">编号</td>
                <th width="60px">姓名</th>
                <th width="60px">性别</th>
                <th width="60px">年龄</th>
                <th width="60px">等级</th>
                <th width="100px">部门</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in personlist">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td><b v-if="item.gender==1">男</b><b v-if="item.gender==2">女</b></td>
                <td>{{item.age}}</td>
                <td>{{item.rank}}级</td>
                <td>{{item.department}}</td>
                <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
            </tr>
        </table>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            添加人员
                        </h4>
                    </div>
                    <div class="modal-body">
                        <table>
                            <tr>
                                <td colspan="2" style="color: red">添加人员</td>
                            </tr>
                            <tr>
                                <td>姓名:</td>
                                <td><input type="text" v-model="person.name"/><span style="color:red">*</span></td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td>
                                    <select v-model="person.gender">
                                        <option value="0">请选择</option>
                                        <option v-for="item in genderlist" :value="item.id">{{item.value}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>年龄:</td>
                                <td><input type="text" v-model="person.age" oninput = "value=value.replace(/[^\d]/g,'')"/><span style="color:red">*</span></td>
                            </tr>
                            <tr>
                                <td>等级:</td>
                                <td>
                                    <select v-model="person.rank">
                                        <option value="0">请选择</option>
                                        <option v-for="item in ranklist" :value="item.id">{{item.value}}
                                        </option>
                                    </select>
                                    <span style="color:red">*</span>
                                </td>
                            </tr>
                            <tr>
                                <td>部门:</td>
                                <td>
                                    <select v-model="person.department">
                                        <option value="请选择">请选择</option>
                                        <option value="开发部">开发部</option>
                                        <option value="支持部">支持部</option>
                                        <option value="程序质量部">程序质量部</option>
                                    </select><span style="color:red">*</span></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" @click="save()">
                            提交
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            genderlist:[
                {id:1,value:"男"},
                {id:1,value:"女"}
            ],
            ranklist:[
                {id:1,value:"1级"},
                {id:2,value:"2级"},
                {id:3,value:"3级"}
            ],
            person:{name:"",gender:1,age:1,rank:1,department:"请选择"},
            personlist:[]
        },
        mounted(){
            axios.post("http://localhost:8080/query/personlist")
                .then(res=>{this.personlist=res.data})
        },
        methods:{
            queryperson:function () {
                axios.post("http://localhost:8080/query/personlist").then(res=>{this.personlist=res.data})
            }
            ,
            openAdd:function () {
                $("#myModal").modal("show");
                this.person={name:"",gender:1,age:1,rank:1,department:"请选择"}
            },
            save:function () {
                if(this.person.name.length<=0){
                    alert("请输入姓名！");
                    return false;
                }
                if(this.person.age<=0){
                    alert("请输入正确的年龄!");
                    return false;
                }
                if(this.person.department=="请选择"){
                    alert("请选择部门!");
                    return false;
                }
                axios({url:"http://localhost:8080/add/person",method:"post",
                    params:{name:this.person.name,gender:this.person.gender,age:this.person.age,rank:this.person.rank,department:this.person.department}})
                    .then(res=>{
                        if(res.data==1){
                            alert("添加成功!");
                            this.person={name:"",gender:1,age:1,rank:1,department:"请选择"};
                            this.queryperson();
                            $("#myModal").modal("hide");
                        }
                    })
            },
            del:function (id) {
                axios({url:"http://localhost:8080/del/by/id",method:"get",
                       params:{id:id}})
                       .then(res=>{
                        if(res.data==1){
                            alert("删除成功!");
                            this.queryperson();
                         }else{
                            alert("删除失败!");
                        }
                       })
            }
        }

    })
</script>